<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>租金计划表</h2>
      </div>
      <a-table :pagination="false" :dataSource="dataSource" :columns="columns"
      :rowClassName="(record, index) => (index % 2 === 1 ? 'yhx' : null)"
       :scroll="{  y: '68vh' }">
        <template #f="{ record }">
          <div>
            <a-tag color="green">已核销</a-tag>
            <a-tag color="blue">部分核销</a-tag>
            <a-tag color="red">未核销</a-tag>
          </div>
        </template>
      </a-table>
      <a-pagination class="pager" :total="50" show-size-changer show-quick-jumper />

    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  import ThePagination from '/@/components/system/the-pagination/index.vue';

  const dataSource = ref([
    
  ]);
  const columns = ref([
    {
      title: '租金期数',
      key: 'index',
      dataIndex: 'index',

    },
    {
      title: '租贷本金（元）',
      key: 'a',
      dataIndex: 'a',
    },
    {
      title: '租贷利率（固定利率）（%）',
      key: 'b',
      dataIndex: 'b',
    },

    {
      title: '租贷利息（元）',
      key: 'c',
      dataIndex: 'c',
    },
    {
      title: '租金总额（元）',
      key: 'd',
      dataIndex: 'd',
    },
    {
      title: '支付日期',
      key: 'e',
      dataIndex: 'e',
    },
    {
      title: '核销状态',
      key: 'f',
      dataIndex: 'f',
      slots: { customRender: 'f' },

    },

    {
      title: '剩余应收',
      key: 'g',
      dataIndex: 'g',
    },
  ]);
</script>
<style scoped lang="less">
  @import './index.less';
  /deep/.yhx td{
    background-color: #e78c99;
  }
</style>
